<%@page language="java" contentType="text/html; charset=utf-8"	pageEncoding="utf-8"%>
<%
	String familyId = (String) request.getAttribute("familyId");
%>
<html>
<head>
<script type="text/javascript" src="js/echarts.common.min.js"></script>
<script type="text/javascript">
var family_id= "<%=familyId%>";
console.log("当前户号:" + family_id);

var tems=[];        //温度数组（存放服务器返回的所有温度值）
var dates=[];        //时间数组
var num = 0;
/**
 * 气温监控页面初始加载
 */
$(document).ready(function () {
	queryData();
});

//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('container'));

// 指定图表的配置项和数据
var option = {
    title: {    //图表标题
        text: '家庭气温实时监控表'
    },
    tooltip: {
        trigger: 'axis', //坐标轴触发提示框，多用于柱状、折线图中
        /*
         控制提示框内容输出格式
        formatter: '{b0}<br/><font color=#FF3333>&nbsp;●&nbsp;</font>{a0} : {c0} ℃ ' + 
                       '<br/><font color=#53FF53>●&nbsp;</font>{a1} : {c1} % ' +          
                       '<br/><font color=#68CFE8>&nbsp;●&nbsp;</font>{a3} : {c3} mm ' +
                       '<br/><font color=#FFDC35>&nbsp;●&nbsp;</font>{a4} : {c4} m/s ' +
                       '<br/><font color=#B15BFF>&nbsp;&nbsp;&nbsp;&nbsp;●&nbsp;</font>{a2} : {c2} hPa ' 
        */
    },
    dataZoom: [
         {
             type: 'slider',    //支持鼠标滚轮缩放
             start: 0,            //默认数据初始缩放范围为10%到90%
             end: 100
         },
         {
             type: 'inside',    //支持单独的滑动条缩放
             start: 0,            //默认数据初始缩放范围为10%到90%
             end: 100
         }
    ],
    legend: {    //图表上方的类别显示               
        show:true,
        data:['温度（℃）']
    },
    color:[
           '#FF3333'    //温度曲线颜色
    ],
    toolbox: {    //工具栏显示             
        show: true,
        feature: {                
            saveAsImage: {}        //显示“另存为图片”工具
        }
    },
    xAxis:  {    //X轴           
        type : 'category',
        axisLabel : {
            formatter: function (value, index) {
                // 格式化成月/日，只在第一个刻度显示年份
                var date = new Date(value);
                var dates = [(date.getMonth() + 1), date.getDate()];
                var times = [date.getHours(), date.getMinutes(), date.getSeconds()];
                /* if (index === 0) {
                    texts.unshift(date.getFullYear());
                } */
                return dates.join('/') + '\n' + times.join(':');
            }    //控制输出格式
        },
        data : []    //先设置数据值为空，后面用Ajax获取动态数据填入
    },
    yAxis : [    //Y轴（这里我设置了两个Y轴，左右各一个）
        {
            //第一个（左边）Y轴，yAxisIndex为0
             type : 'value',
             name : '温度',
             /* max: 120,
             min: -40, */
             axisLabel : {
                 formatter: '{value} ℃'    //控制输出格式
             }
         }
             
    ],
    series : [    //系列（内容）列表                      
        {
            name:'温度（℃）',
            type:'line',    //折线图表示（生成温度曲线）
            symbol:'circle',    //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形                        
            smooth:true,
            /* symbol: 'none',
            sampling: 'average',
            itemStyle: {
                normal: {
                    color: 'rgb(255, 70, 131)'
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(255, 158, 68)'
                    }, {
                        offset: 1,
                        color: 'rgb(255, 70, 131)'
                    }])
                }
            }, */
            data:[]        //数据值通过Ajax动态获取
        }            
    ]
};
         
myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
myChart.setOption(option);    //载入图表

function queryData() {
	console.log("当前index:" + num);
	console.log("请求familyId:" + family_id);
	$.ajax({    //使用JQuery内置的Ajax方法
	    type : "post",        //post请求方式
	    async : true,        //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
	    url : "air-monitor/list.do",    //请求发送到ShowInfoIndexServlet处
	    data : {familyId:family_id,num:num},        //请求内包含一个key为name，value为A0001的参数；服务器接收到客户端请求时通过request.getParameter方法获取该参数值
	    dataType : "json",        //返回数据形式为json
	    success : function(result) {
	    	var dataArray = result.data;
	        //请求成功时执行该函数内容，result即为服务器返回的json对象
	        if (dataArray != null && dataArray.length > 0) {
	        	console.log("此次新增:" + dataArray.length);
	        	num += dataArray.length;
	            for(var i=0;i<dataArray.length;i++) {
	                tems.push(dataArray[i].temperature);        //挨个取出温度值并填入前面声明的温度数组
	                dates.push(dataArray[i].recordTime);
	            }
	            myChart.hideLoading();    //隐藏加载动画
	                
	            myChart.setOption({        //载入数据
	                xAxis: {
	                    data: dates    //填入X轴数据
	                },
	                series: [    //填入系列（内容）数据
	                    {
	                        // 根据名字对应到相应的系列
	                        name: '温度',
	                        data: tems
	                    }
	                ]
	            });
	        } else {
	            //返回的数据为空时显示提示信息
	            console.log("没有新的温度数据");
	            myChart.hideLoading();
	        }
	    }, error : function(errorMsg) {
	        //请求失败时执行该函数
	        alert("实时温度监控数据获取失败");
	        myChart.hideLoading();        
	    }
	});
}

setInterval(function () {
	
	queryData();
	/* myChart.setOption({
		xAxis: {
	        data: dates    //填入X轴数据
	    },
	    series: [    //填入系列（内容）数据
	        {
	            // 根据名字对应到相应的系列
	            name: '温度',
	            data: tems
	        }
	    ]
	}); */
}, 15000);
</script>
</head>
<body>
	<div class="linkbar"><a>监控平台</a>/<a>家庭和电机监控</a>/<a>气温监控</a></div>
	<div id="container" style="height: 80%"></div>
</body>
</html>